<template>
	<view>
		<!-- 头部固定的图片区域 -->
		<image class="topImg" :src="userInfoData.url"></image>
		
		<!-- 作者信息区域 -->
		<view>
			<view class="authInfo">
				<view class="authUrl">
					<image class="authUrl" :src="userInfoData.head" :style="{'boxShadow':'0rpx 0rpx 30rpx ' + themeColorLess}"></image>
				</view>
				<view class="authMid">
					<view class="authDesc">
						<view class="authName">{{userInfoData.name}}</view>
						<view class="selfIntro">{{userInfoData.desc}}</view>
					</view>
					<!-- <image class="right" src="@/static/images/my/right.png"></image> -->
				</view>
			</view>
		</view>
		
		
		<!-- 中间的框框 -->
		<view>
			<view class="midFrame" :style="{'boxShadow':'0rpx 0rpx 30rpx ' + themeColorLess}">
				<view class="midItem">
					<view class="num">{{userInfoData.studyWord}}</view>
					<view class="desc">学习单词</view>
				</view>
				<view class="midItem">
					<view class="num">{{userInfoData.persistDay}}</view>
					<view class="desc">坚持天数</view>
				</view>
			</view>
		</view>
		
		<!-- 下面的选项条 -->
		<view class="bottomNav">
			<navigator url="/pages/plan/plan">
				<view class="bottomItem">
					<view class="left">
						<image src="@/static/images/my/plan.png" ></image>
						<text>我的计划</text>
					</view>
					<image class="right" src="@/static/images/my/right.png"></image>
				</view>
			</navigator>
			
			<navigator url="/pages/list/list?type=2">
				<view class="bottomItem">
					<view class="left">
						<image src="@/static/images/my/coll.png" ></image>
						<text>我的收藏</text>
					</view>
					<image class="right" src="@/static/images/my/right.png"></image>
				</view>
			</navigator>
			
			<navigator url="/pages/list/list?type=3">
				<view class="bottomItem">
					<view class="left">
						<image src="@/static/images/my/wrong.png" ></image>
						<text>错题本</text>
					</view>
					<image class="right" src="@/static/images/my/right.png"></image>
				</view>
			</navigator>
			
			<navigator url="/pages/my/historyTest/historyTest">
				<view class="bottomItem">
					<view class="left">
						<image src="@/static/images/my/history.png" ></image>
						<text>测试记录</text>
					</view>
					<image class="right" src="@/static/images/my/right.png"></image>
				</view>
			</navigator>
			
			<navigator url="/pages/my/skin/skin">
				<view class="bottomItem">
					<view class="left">
						<image src="@/static/images/my/config.png" ></image>
						<text>主题换肤</text>
					</view>
					<image class="right" src="@/static/images/my/right.png"></image>
				</view>
			</navigator>
			
			<view class="bottomItem" @click="logout">
				<view class="left">
					<image src="@/static/images/my/out.png" ></image>
					<text>退出登录</text>
				</view>
				<image class="right" src="@/static/images/my/right.png"></image>
			</view>
			
		</view>
		
		<!-- 提示信息弹窗 -->
		<popup ref="popup"></popup>
	</view>
</template>

<script>
	import popup from "@/components/popup.vue";
	import {getUserInfo} from "@/api/user.js";
	export default {
		components:{popup},
		data() {
			return {
				userInfoData:{},
				themeColor:"",
				themeColorLess:"",
			};
		},
		async onLoad(){
			//获取主题颜色
			let color = uni.getStorageSync("color");
			this.themeColor = JSON.parse(color).themeColor;
			this.themeColorLess = JSON.parse(color).themeColorLess;
			
			let ans = (await getUserInfo()).data;
			console.log("ans",ans);
			if (ans.code != 200) {
				this.$refs.popup._popError(ans.error);
				return;
			}
			this.userInfoData = ans.data;
		},
		methods:{
			logout(){
				uni.showModal({
					title:"确定退出吗?",
					async success(res) {
						if (res.confirm) {
							uni.navigateTo({
								url:"/pages/login/login"
							})
						} else {
							console.log("取消");
						}
					},
				})
			}
		}
	}
</script>

<style lang="scss">
	// 头部固定的图片区域
	.topImg{
		width: 100%;
		height: 320rpx;
		position: fixed;
		top: 0;
		z-index: -1;
	}
	
	// 作者信息区域 
	.authInfo{
		margin: 230rpx $both-sides;
		margin-bottom: 20rpx;
		z-index: 100;
		
		.authUrl{
			width: 120rpx;
			height: 120rpx;
			border-radius: 100%;
			overflow: hidden;
			
			image{
				width: 100%;
				height: 100%;
			}
		}
		
		.authMid{
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.authDesc{
				display: flex;
				flex-direction: column;
				
				.authName{
					font-size: 30rpx;
					color: #333333;
					padding-bottom: 8rpx;
					font-weight: 700;
				}
				
				.selfIntro{
					font-size: 24rpx;
					color: #393333;
				}
			}
			
			.right{
				width: 22rpx;
				height: 34rpx;
			}
		}
	}
	
	// 中间的框框
	.midFrame{
		margin: 0 $both-sides;
		height: 240rpx;
		display: flex;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: white;
		
		.midItem{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			
			.num{
				font-size: 40rpx;
			}
			
			.desc{
				font-size: 26rpx;
				padding-top: 10rpx;
			}
		}
	}
	
	// 下面的选项条
	.bottomNav{
		margin: 30rpx $both-sides;
		
		.bottomItem{
			width: 100%;
			height: 40rpx;
			padding: 26rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: solid $border-color $border-size;
			
			.left{
				height: 100%;
				display: flex;
				align-items: center;
			
				image{
					width: 40rpx;
					height: 100%;
					padding-right: 20rpx;
				}
				
				text{
					font-size: 28rpx;
				}
			}
			
			.right{
				height: 30rpx;
				width: 18rpx;
			}
		}
	}
</style>
